'use strict';

const modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const btnCloseModal = document.querySelector('.close-modal');
const btnOpenModal = document.querySelectorAll('.show-modal');
console.log(btnOpenModal);

const closeModal = function(){
    modal.classList.add('hidden');
    overlay.classList.add('hidden');
}
const openModal = function(){
    console.log('Button Click'); 
    //使用类选择器的classList的remove方法，将hidden类选择器移除，那么modal就可以显示了
    //此处的hidden只是传入一个类名，并不是选中类选择器
    modal.classList.remove('hidden');
    overlay.classList.remove('hidden');
 }

btnOpenModal.forEach(i =>{
    i.addEventListener('click',openModal);

})

btnCloseModal.addEventListener('click',closeModal);
overlay.addEventListener('click',closeModal);

//监听键盘事件
//此处函数中传入的参数e，当我们按下键盘上的某个键时，这个e就是对应的键
document.addEventListener('keydown',function(e){
    console.log(e.key);
    if(e.key==='Escape' && !modal.classList.contains('hidden')){
        closeModal();
    }
})